<script setup lang="ts">
import { useLayoutConfigStore } from '@/store/layoutConfig'
import type { RouteRecordRaw } from 'vue-router'
import { useAuthStore } from '@/store/auth'

// 异步引入
const SubMenu = defineAsyncComponent(() => import('./SubMenu.vue'))

const route = useRoute()
const layoutConfig = useLayoutConfigStore();
const { isCollapse } = storeToRefs(layoutConfig);

const state = reactive({
  // 要渲染的菜单数据
  menuList: [] as RouteRecordRaw[],
});

// 动态渲染菜单逻辑
const authStore = useAuthStore()
// console.log('menuList', authStore.menuList)

onMounted(() => {
  setFilterRoutes()
})

function setFilterRoutes() {
  const _filterRoutes = (routes: RouteRecordRaw[]) => {
    // 过滤出不隐藏的菜单
    const targetRoutes = routes.filter(item => !item.meta?.hidden);
    // console.log('targetRoutes', targetRoutes);
    targetRoutes.forEach(item => {
      if (item.children && item.children.length > 0) {
        item.children = _filterRoutes(item.children)
      }
    });
    return targetRoutes;
  }
  // 拷贝一份，为了不影响pinia中的状态
  const copyMenuList = JSON.parse(JSON.stringify(authStore.menuList));
  state.menuList = _filterRoutes(copyMenuList);
  // console.log('state.menuList', state.menuList);
}

</script>

<template>
  <el-scrollbar class="h-full w-full">
    <el-menu class="h-full w-full border-0" unique-opened router :default-active="route.path" :collapse-transition=false
      :collapse="isCollapse">
      <sub-menu v-for="menu in state.menuList" :key="menu.path" :menu="menu" />
    </el-menu>
  </el-scrollbar>
</template>

<style scoped lang="scss">
:deep(.el-scrollbar__view) {
  height: 100%;
  border-right: 1px solid #f1f1f1;
}
</style>